<!DOCTYPE html>
<p>The text "Column 1" should be seen in the first column, and "Column 2"
    should be seen in the second column.</p>
<div style="columns:2; column-fill:auto; column-rule:1px dotted; width:20em; height:130px; column-fill:auto; line-height:50px;">
    <div style="height:50px;"></div>
    <div style="position:relative;">
        <div id="elm" style="position:absolute; top:0; left:0;">
            <div id="child1">Column 1</div>
            <div id="child2">Column 2</div>
        </div>
    </div>
</div>

<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script>
test(() => {
    document.body.offsetTop;
    var elm = document.getElementById("elm");
    var child1 = document.getElementById("child1");
    var child2 = document.getElementById("child2");
    elm.style.fontSize = "2em";
    assert_equals(elm.offsetHeight, 130);
    assert_equals(child1.offsetTop, 0);
    assert_equals(child2.offsetTop, 80);
}, "Pagination struts retained after re-layout of abspos.");
</script>
